import React from 'react';
import '../login/login.css';
import { Navigate } from "react-router-dom";


class LoginFrom extends React.Component {
    
    state = {userName: '',password:'',status:false};
    
  
    handleChangeUserName = (event) => {
      this.setState({userName: event.target.value});
    }

    handleChangePassword = (event) => {
        this.setState({password: event.target.value});
      }
  
    handleSubmit = (event) => {
      if (this.state.userName==="admin"&&this.state.password==="123456"){
        this.setState({status: true});
        document.body.style.background = 'linear-gradient(#d0d2d6, #889bb2)'
      }else{
        alert("账号或密码错误")
      }
    }

    render() {
      console.log(this.state.status)
      return (
        <div className="my-login-box">
         {this.state.status&& (
          <Navigate to='/home' replace='true' />
          )}
            <h2>Login</h2>
            <form>
                <div className="user-box">
                    <input type="text"  onChange={this.handleChangeUserName} name='userName'/>
                    <label>Username</label>
                </div>
                <div className="user-box">
                    <input type="password"  onChange={this.handleChangePassword} name='password'/>
                    <label>Password</label>
                </div>
                <a onClick={this.handleSubmit}>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span> Submit
                </a>
            </form>
        </div>
      );
    }
  }

export default LoginFrom;
// export default withRouter(LoginFrom);
